{extends file="assets::smarty-templates::Master"|ToPath}
{block name=content}

<form id="CrearSolicitudForm" method="post" action="{$action}" class="form-validate">
    <ul class="breadcrumb" data-connect="FormContent">
        <li><a href="#Identificacion">Identificacion de la empresa</a></li>
        <li><a href="#Requerimiento">Requerimiento</a></li>
        <li><a href="#DatosUbEstSolicitado">Datos Ubicaci&oacute;n Estudiante Solicitado</a></li>
        <li><a href="#DatosUbicacion">Datos Ubicaci&oacute;n</a></li>
    </ul>

    <div id="FormContent">
        <div id="Identificacion">
            <fieldset>
                <label>Datos de la Empresa</label>
                <dl>
                    <label>Nombre</label>
                    <div>
                       {$company->getNombre()}
                    </div>
                </dl>
            </fieldset>
            <fieldset>
                <label>Datos del solicitante</label>
                <dl>
                    <label for="NombreSolicitante">Nombre Solicitante</label>
                    <div><input type="text" id="NombreSolicitante"
                                name="{bind name="NombreSolicitante" to="Solicitante.Nombre"}" class="required"/><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>

                    <label for="AreaSolicitante">&Aacute;rea</label>


                    <div><input type="text" id="AreaSolicitante"
                                name="{bind name="AreaSolicitante" to="Solicitante.Area"}" class="required medium"/><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>

                    <label for="CargoSolicitante">Cargo</label>


                    <div><input type="text" id="CargoSolicitante"
                                name="{bind name="CargoSolicitante" to="Solicitante.Cargo"}" class="required medium"/><span title="Campo Requerido" class="obligatorio"></span></div>
                </dl>
                <dl>

                    <label for="EmailSolicitante">Email</label>

                    <div><input type="text" id="EmailSolicitante"
                                name="{bind name="EmailSolicitante" to="Solicitante.Email"}" class="required email medium"/><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>

                    <label for="TelefonoSolicitante">Tel&eacute;fono</label>

                    <div><input type="text" id="TelefonoSolicitante"
                                name="{bind name="TelefonoSolicitante" to="Solicitante.Telefono"}"  class="required number small"/><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>

                    <label for="ExtensionSolicitante">Extensi&oacute;n</label>

                    <div><input type="text" id="ExtensionSolicitante"
                                name="{bind name="ExtensionSolicitante" to="Solicitante.Extension"}" class="number small"/></div>

                </dl>
                <dl>
                    <div>
                        <button class="next small">Siguiente</button>
                    </div>
                </dl>
            </fieldset>
        </div>

        <div id="Requerimiento">
            <fieldset>
                <label>Perfil requerido</label>
                <dl>
                    <label for="CodigoPlan">Programa</label>

                    <div><select name="{bind name="PlanEstudio" to="CodigoPlan"}" class="required" id="CodigoPlan">
                            {foreach $careers as $plan}
                                <option value="{$plan->getCodigoPlan()}">{$plan->getNombrePlan()}</option>
                            {/foreach}
                        </select> <span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>
                    <label>Descripci&oacute;n del Perfil</label>

                    <div>
                        <textarea name="{bind name="DescripcionPerfil" to="DescripcionPerfil"}" id="DescripcionPerfil" placeholder="Describa brevemente si requiere destrezas o habilidades espec&iacute;ficas o experiencia laboral por parte del estudiante"></textarea>
                    </div>

                </dl>
                <dl>

                    <label for="FechaIniciacion">
                        Fecha de iniciaci&oacute;n de la pr&aacute;ctica
                    </label>


                    <div><input name="{bind name="FechaIniciacion" to="FechaIniciacion"|filter:"DateToJson('d/m/Y')"}" id="FechaIniciacion" class="required small" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>

                    <label for="FechaFinalizacion">
                        Fecha de finalizaci&oacute;n de la pr&aacute;ctica
                    </label>


                    <div><input name="{bind name="FechaFinalizacion" to="FechaFinalizacion"|filter:"DateToJson('d/m/Y')"}" id="FechaFinalizacion" class="required small" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>
                <dl>
                    <div>
                        <button class="prev small">Anterior</button>
                        <button class="next small">Siguiente</button>
                    </div>
                </dl>
            </fieldset>
            
        </div>
        <div id="DatosUbEstSolicitado">
            <fieldset>
                <label>Datos Ubicaci&oacute;n del Estudiante Solicitado en Pr&aacute;cticas Profesionales </label>
                <dl>

                    <label for="AreaTrabajo">
                        &Aacute;rea o Departamento a asignar
                    </label>


                    <div><input type="text" name="{bind name="AreaTrabajo" to="AreaTrabajo"}" id="AreaTrabajo" class="required medium"/><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="Cargo">
                        Cargo
                    </label>


                    <div><input type="text" name="{bind name="Cargo" to="Cargo"}" id="Cargo" class="required medium" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="NombreTutor">
                        Nombre del tutor
                    </label>

                    <div><input type="text" name="{bind name="NombreTutor" to="Tutor.Nombre"}" id="NombreTutor" class="required medium" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="CargoTutor">
                        Cargo
                    </label>

                    <div><input type="text" name="{bind name="CargoTutor" to="Tutor.Cargo"}" id="CargoTutor" class="required medium" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="TelefonoTutor">
                        Tel&eacute;fono
                    </label>

                    <div><input type="text" name="{bind name="TelefonoTutor" to="Tutor.Telefono"}" id="TelefonoTutor" class="required number small" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="ExtensionTutor">
                        Extensi&oacute;n
                    </label>


                    <div><input type="text"
                                name="{bind name="ExtensionTutor" to="Tutor.Extension"}"
                                class="small"
                                id="ExtencionTutor" class="number"/></div>

                </dl>
                <dl>
                    <div>
                        <button class="prev small">Anterior</button>
                        <button class="next small">Siguiente</button>
                    </div>
                </dl>
            </fieldset>
        </div>
        <div id="DatosUbicacion">
            <fieldset>
                <label>Ubicaci&oacute;n geogr&aacute;fica del sitio de pr&aacute;cticas</label>
                <dl>

                    <label for="DireccionPracticas">
                        Direcci&oacute;n
                    </label>

                    <div><input type="text" name="{bind name="DireccionPracticas" to="DireccionPracticas"}" id="DireccionPracticas" class="required" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>

                    <label for="TelefonoPracticas">
                        Tel&eacute;fono
                    </label>

                    <div><input type="text" name="{bind name="TelefonoPracticas" to="Telefono"}" id="TelefonoPracticas" class="required number small" /><span title="Campo Requerido" class="obligatorio"></span></div>

                </dl>

                <dl>
                    <label>Pais</label>
                    <div>
                        <select name="pais" id="pais" class="required ">
                            <option>- Seleccione -</option>
                            {foreach $Paises as $pais}
                                <option value="{$pais->GetNombre()}">{$pais->GetNombre()}</option>
                            {/foreach}
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>
                </dl>
                <dl>
                    <label>Departamento</label>
                    <div>
                        <select name="departamento" class="required" id="departamento">
                            
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>                   
                </dl>
                <dl>
                    <label>Ciudad</label>
                    <div>
                        <select class="required" name="{bind name="municipio" to="CodigoMunicipio"}" id="municipio">
                            
                        </select>
                        <span title="Campo Requerido" class="obligatorio"></span>
                    </div>
                </dl>

                <dl>

                    <label for="EsSucursalPrincipal">
                        Su empresa es
                    </label>

                    <div><input type="radio" 
                                name="{bind name="EsSucursalPrincipal" to="EsSucursalPrincipal"}" 
                                id="sucursal"
                                value="0"
                                style="position: relative !important; left: auto !important;"
                                checked="checked"/>
                        <label for="sucursal">Sucursal</label>

                        <input type="radio" 
                               name="{bind name="EsSucursalPrincipal" to="EsSucursalPrincipal"}"
                               id="principal"
                               value="1"
                               style="position: relative !important; left: auto !important;"/>
                        <label for="principal">Principal</label></div>

                </dl>
                <dl>
                    <div>
                        <button class="prev small">Anterior</button>
                    </div>
                </dl>
            </fieldset>
            <button style="float: right;" id="SubmitButton" class="i_cassette icon" >Enviar Solicitud</button><span class="wl_formstatus"></span>
        </div>
    </div>
</form>

<script type="text/javascript">
    {literal}
    require(["jquery", "Acaweb.AjaxRequest", "jQuery.ui"], function(jQuery, Acaweb){
        jQuery(document).ready(function($){

            /*Selector de Fechas*/
            var dates = $( "#FechaIniciacion, #FechaFinalizacion" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    changeYear: true,
                    numberOfMonths: 1,
                    dateFormat: 'dd/mm/yy',
                    onSelect: function( selectedDate ) {
                        var option = this.id == "FechaIniciacion" ? "minDate" : "maxDate",
                                instance = $( this ).data( "datepicker" ),
                                date = $.datepicker.parseDate(
                                        instance.settings.dateFormat ||
                                        $.datepicker._defaults.dateFormat,
                                        selectedDate, instance.settings );
                        dates.not( this ).datepicker( "option", option, date );
                    }
            });


            /*Enlace de Ciudades con paises*/
            $.ajaxSetup({
                cache: false
            });

            var locaciones = new Acaweb.Locaciones();

            $("#pais").change(function(){
                $("#departamento").html("");
                $("#municipio").html("");
                var valor = $("#pais").val();
                locaciones.error = function(){

                }    
                locaciones.success = function(data){
                    var departamentos = "<option>- Seleccione -</option>";
                    $.each(data, function(k, departamento){
                        departamentos += "<option value='" + departamento.Nombre + "'>";
                        departamentos +=  departamento.Nombre;
                        departamentos += "</option>";
                    })

                    $("#departamento").html(departamentos);
                }

                locaciones.GetDepartamento(valor);
            });

            $("#departamento").change(function(){
                $("#municipio").html("");
                var valor = $("#departamento").val();
                locaciones.error = function(){
                    alert("Boom...!");
                }    
                locaciones.success = function(data){
                    var municipios = "<option>- Seleccione -</option>";
                    $.each(data, function(k, municipio){

                        municipios += "<option value='" + municipio.CodigoMunicipio + "'>";
                        municipios +=  municipio.Nombre;
                        municipios += "</option>";
                    })

                    $("#municipio").html(municipios);
                }

                locaciones.GetMunicipioByNombreDepartamento(valor);
            });

        });
    });
    {/literal}
</script>
{/block}